<template>
  <div class="eval-org">
    <div class="eval-org-name">{{ org.evaluationObjName }}</div>
    <div class="eval-item-btn">
      <evaluate-button
        v-for="score in scores"
        :key="score.id"
        :tipsContent="showEvaluationDesc(score) ? org.evaluationDesc : ''"
        :selected="org.evaluationResult === score.id"
        :disabled="org.evaluationState !== '1'"
        @evalBtnClick="clickScore(score)">
        {{ score.label }}
      </evaluate-button>
    </div>
    <slot name="inputDesc"></slot>
  </div>
</template>
<script>
import EvaluateButton from './EvaluateButton'
export default {
  name: 'EvaluateRow',
  components: { EvaluateButton },
  props: {
    // 被评价的单位item
    org: {
      type: Object,
      default: () => {},
    },
    // 评分等级数据
    scores: {
      type: Array,
      default: () => [
        {
          value: 100,
          id: '1',
          label: '好',
        },
        {
          value: 80,
          id: '2',
          label: '较好',
        },
        {
          value: 50,
          id: '3',
          label: '一般',
        },
        {
          value: 0,
          id: '4',
          label: '较差',
        },
      ],
    },
  },
  data() {
    return {}
  },
  computed: {
    showEvaluationDesc() {
      return score => {
        let show = false
        if (this.org.evaluationState === '2') {
          // 已完成
          if (score.id === this.org.evaluationResult && this.org.evaluationDesc) {
            show = true
          } else {
            show = false
          }
        } else {
          // 进行中 未开始
          if (
            score.id === this.org.evaluationResult &&
            (this.org.evaluationResult === '3' || this.org.evaluationResult === '4') &&
            this.org.evaluationDesc
          ) {
            show = true
          } else {
            show = false
          }
        }
        return show
      }
    },
  },
  methods: {
    clickScore(score) {
      this.$emit('clickScore', {
        score: score,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.eval-org {
  font-size: $fontSize30;
  margin-bottom: px2rem(30);
  .eval-org-name {
    // color: #606266;
    color: #333;
    margin-bottom: px2rem(20);
  }
  .eval-item-btn {
    display: flex;
  }
}
</style>
